<template>
  <div class="form-container">
    <!-- 第一个卡片 -->
    <el-card class="form-card" shadow="always" style="width: 900px">
      <div>报价信息</div>
      <el-form
        ref="ruleFormRef"
        :model="formData"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="筛网工况" prop="screenCondition">
              <el-select
                v-model="formData.screenCondition"
                placeholder="下拉选择"
                style="width: 100%; height: 40px"
              >
                <el-option label="上海" value="shanghai" />
                <el-option label="北京" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他工况" prop="otherCondition">
              <el-input
                v-model="formData.otherCondition"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="折钩默认角度" prop="hookAngle">
              <el-select
                v-model="formData.hookAngle"
                placeholder="请选择"
                style="width: 100%; height: 40px"
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他角度说明" prop="otherAngle">
              <el-input v-model="formData.otherAngle" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 第二个卡片（产品信息 + 表格） -->
    <el-card class="form-card" shadow="always" style="width: 900px">
      <div>产品信息</div>
      <el-table
        :data="formData.tableRows"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          fixed="left"
          label="产品名称"
          width="80px"
          align="center"
        >
          <template #default="{ row }">
            <el-input v-model="row.productName" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="长(mm)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.length"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="宽(mm)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.width"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="丝径(mm)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.bwg"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="孔径(mm)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.aperture"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="数量(pcs)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.number"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="材质" width="100px" align="center">
          <template #default="{ row }">
            <el-input v-model="row.material" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="折钩包边" width="100px" align="center">
          <template #default="{ row }">
            <el-input v-model="row.hookEdge" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="编织类型" width="100px" align="center">
          <template #default="{ row }">
            <el-input v-model="row.estaType" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="预计单重(kg/件)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.unitWeight"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="单价(USD/pcs)" width="80px" align="center">
          <template #default="{ row }">
            <el-input
              v-model="row.unitPrice"
              placeholder="请输入"
              type="number"
              @input="updateTotal(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" width="100px" align="center">
          <template #default="{ row }">
            <el-input v-model="row.remark" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80px" align="center">
          <template #default="{ row, $index }">
            <el-button type="danger" size="small" @click="removeRow($index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 产品信息表 -->
      <el-row
        class="product-info-form"
        :gutter="40"
        style="margin-top: 20px; padding-left: 30px"
      >
        <span>总重量:</span>
        <el-col :span="5">
          <el-input
            v-model="formData.totalWeight"
            placeholder="总重量"
            readonly
          />
        </el-col>
        <span>总金额:</span>
        <el-col :span="5">
          <el-input
            v-model="formData.totalPrice"
            placeholder="总金额"
            readonly
          />
        </el-col>
        <span>核算海运费用:</span>
        <el-col :span="5">
          <el-input v-model="formData.calculateCost" placeholder="海运费用" />
        </el-col>
      </el-row>
      <el-row
        class="product-info-form"
        :gutter="20"
        style="margin-top: 20px; padding-left: 20px"
      >
        <span>预估总体积(方):</span>
        <el-col :span="4">
          <el-input v-model="formData.totalVolume" placeholder="请输入" />
        </el-col>
        <span>总交期(天):</span>
        <el-col :span="5">
          <el-input v-model="formData.totalDelivery" placeholder="请输入" />
        </el-col>
        <span>报价有效期:</span>
        <el-col :span="5">
          <el-select v-model="formData.validity" placeholder="请选择">
            <el-option label="30天" value="30" />
            <el-option label="60天" value="60" />
            <el-option label="90天" value="90" />
          </el-select>
        </el-col>
      </el-row>
      <el-row
        class="product-info-form"
        :gutter="20"
        style="margin-top: 20px; padding-left: 20px"
      >
        <span>模型情况说明:</span>
        <el-col :span="12">
          <el-input
            v-model="formData.modelDesc"
            placeholder="模型情况说明"
            rows="4"
          />
        </el-col>
      </el-row>
    </el-card>

    <!-- 提交按钮 -->
    <el-row class="submit-container" :gutter="20" style="margin-top: 30px">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button type="default" @click="resetForm">重置</el-button>
    </el-row>
  </div>
</template>

<script setup>
// 导入相关依赖
import { ref, reactive } from "vue";
import { saveScreenInquiry } from "@/api/supplier/supplier";
import {
  ElMessage,
  ElForm,
  ElInput,
  ElSelect,
  ElOption,
  ElButton,
  ElRow,
  ElCol,
  ElTable,
  ElTableColumn,
  ElCard
} from "element-plus";

// 表单数据
const formData = reactive({
  screenCondition: "",
  otherCondition: "",
  hookAngle: "",
  otherAngle: "",
  totalWeight: 0,
  totalPrice: 0,
  calculateCost: "",
  totalVolume: "",
  totalDelivery: "",
  validity: "",
  modelDesc: "",
  tableRows: [
    {
      productName: "",
      length: 0,
      width: 0,
      bwg: 0,
      aperture: 0,
      number: 0,
      material: "",
      hookEdge: "",
      estaType: "",
      unitWeight: 0,
      unitPrice: 0,
      remark: "",
      totalWeight: 0,
      totalPrice: 0
    }
  ]
});

// 更新总重和总价
const updateTotal = row => {
  row.totalWeight = (row.unitWeight || 0) * (row.number || 0);
  row.totalPrice = (row.unitPrice || 0) * (row.number || 0);

  // 更新总重量和总金额
  formData.totalWeight = formData.tableRows.reduce(
    (total, row) => total + row.totalWeight,
    0
  );
  formData.totalPrice = formData.tableRows.reduce(
    (total, row) => total + row.totalPrice,
    0
  );
};

// 删除行
const removeRow = index => {
  formData.tableRows.splice(index, 1);
  updateTotal();
};

// 重置表单
const resetForm = () => {
  formData.screenCondition = "";
  formData.otherCondition = "";
  formData.hookAngle = "";
  formData.otherAngle = "";
  formData.totalWeight = 0;
  formData.totalPrice = 0;
  formData.calculateCost = 0;
  formData.totalVolume = 0;
  formData.totalDelivery = 0;
  formData.validity = 0;
  formData.modelDesc = "";

  formData.tableRows.length = 1;
  formData.tableRows[0] = {
    productName: "",
    length: 0,
    width: 0,
    bwg: 0,
    aperture: 0,
    number: 0,
    material: "",
    hookEdge: "",
    estaType: "",
    unitWeight: 0,
    unitPrice: 0,
    remark: "",
    totalWeight: 0,
    totalPrice: 0,
    id: 0
  };
};

// 提交表单
const submitForm = async () => {
  console.log(formData.tableRows); // 打印表格中的数据，确保数据是正确填充的

  // 拉平 tableRows 数据，将每一行的数据平铺到最终提交的数据中
  const flattenedData = formData.tableRows.reduce((acc, row) => {
    // 将每一行的数据展开，直接添加到 acc 中
    acc.productName = row.productName || "";
    acc.length = row.length || 0;
    acc.width = row.width || 0;
    acc.bwg = row.bwg || 0;
    acc.aperture = row.aperture || 0;
    acc.number = row.number || 0;
    acc.material = row.material || "";
    acc.hookEdge = row.hookEdge || "";
    acc.estaType = row.estaType || "";
    acc.unitWeight = row.unitWeight || 0;
    acc.unitPrice = row.unitPrice || 0;
    acc.remark = row.remark || "";
    acc.totalWeight = row.totalWeight || 0;
    acc.totalPrice = row.totalPrice || 0;
    return acc;
  }, {});

  // 构建最终的提交数据对象
  const formSubmitData = {
    screenCondition: formData.screenCondition,
    otherCondition: formData.otherCondition,
    hookAngle: formData.hookAngle,
    otherAngle: formData.otherAngle,
    totalWeight: formData.totalWeight,
    totalPrice: formData.totalPrice,
    calculateCost: formData.calculateCost,
    totalVolume: formData.totalVolume,
    totalDelivery: formData.totalDelivery,
    validity: formData.validity,
    modelDesc: formData.modelDesc,
    // 将平铺后的数据添加到 formSubmitData 中
    ...flattenedData
  };

  try {
    const response = await saveScreenInquiry(formSubmitData);
    console.log("formSubmitData>>>" + JSON.stringify(formSubmitData));
    console.log("res>>>", JSON.stringify(response));
    if (response && response.code === 200) {
      ElMessage.success("表单提交成功！");
    } else {
      ElMessage.error(response.message || "提交失败，请稍后再试！");
    }
  } catch (error) {
    console.error("提交时发生错误:", error);
    ElMessage.error("提交时发生错误，请稍后再试！");
  }
};
</script>

<style scoped>
.form-container {
  /* margin-top: 30px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.form-card {
  width: 800px;
  margin-bottom: 20px;
}

.demo-ruleForm {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.product-info-form {
  display: flex;
  align-items: center;
}

.product-info-form > span {
  line-height: 32px;
}
</style>
